<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类新增</title>
  <link th:href="@{/images/favicon.ico}" href="../../static/images/favicon.ico" rel="icon" type="image/x-ico">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" th:href="@{/css/me.css}" href="../../static/css/me.css">
</head>
<body>


<!--导航栏-->
<nav class="ui inverted gird-header" >
  <div class="ui container">
    <div class="ui inverted secondary stackable menu">
      <h2 class="ui olive header item" style="font-family: STSong">管理后台</h2>
      <a href="#" th:href="@{/admin/blogs}" class="m-item item m-mobile-hide"><i class="home icon"></i>文章管理</a>
      <a href="#" th:href="@{/admin/types}" class="active m-item item m-mobile-hide"><i class="clone outline icon"></i>分类管理</a>
      <a href="#" th:href="@{/admin/friendlinks}" class="m-item item m-mobile-hide"><i class="pencil alternate icon"></i>友链管理</a>
      <a href="#" th:href="@{/admin/pictures}" class="m-item item m-mobile-hide"><i class="image icon"></i>相册管理</a>
      <!--最右上角的头像和注销 只有用户登陆了,才会显示-->
      <div class="right m-item m-mobile-hide menu" th:if="${session.loginedadmin}">
        <!--注意下面这个下拉菜单, 必须加一个JavaScript代码才能显示出来 JavaScript代码在下面-->
        <div class="ui dropdown  item">
          <div class="text">
            <!--这里有一个th, 让我给删了, 这个th的作用是, 动态显示别的用户的头像. 现在这个头像链接是死代码. 那行代码到lirenmi的项目去找-->
            <img class="ui avatar image" src="/images/dajiavatar.jpg">
            <!--非常重要, model.addAttribute传对象 的前端接收!-->
            <span th:text="${session.loginedadmin.nickname}"></span>
          </div>
          <!--必须加一个JavaScript代码才能显示出来 JavaScript代码在下面-->
          <i class="dropdown icon"></i>
          <div class="menu">
            <a class="item" th:href="@{/admin/adminlogout}">注销</a>
          </div>
        </div>
      </div>

    </div>
  </div>
  <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
    <i class="sidebar icon"></i>
  </a>
</nav>


<div class="m-padded-tb-hugex">
  <div class="ui menu attached inverted" style="background-color:rgba(255, 255, 255, 0.1)">
    <div class="ui container" >
      <a th:href="@{/admin/types/input}" class="active item" >发布</a>
      <a th:href="@{/admin/types}" class="item">列表</a>
    </div>
  </div>
</div>
<br><br><br>

  <!--中间内容-->
  <div  class="m-container-small m-padded-tb-massive">
    <div class="ui container">
      <!--
        这里, 李仁密老师是这样写的:
        th:action="*{id}==null ? @{/admin/types} : @{/admin/types/{id}(id=*{id})}"

        这里的* 到底啥意思?
        网上很不好搜, 我直接去thymeleaf中文文档搜索: "*{
        果然搜出了想要的答案,而且后面有详实的例子:
        4.3 Expressions on selections (asterisk syntax)
          Not only can variable expressions be written as ${...}, but also as *{...}.

          There is an important difference though: the asterisk syntax evaluates expressions on selected objects rather than on the whole context. That is, as long as there is no selected object, the dollar and the asterisk syntaxes do exactly the same.

          And what is a selected object? The result of an expression using the th:object attribute. Let’s use one in our user profile (userprofile.html) page:

          简单说来就是: th:text="*{firstName}" == th:text="${session.user.lastName}"
          就是一种简写形式罢了

          现在我们用熟悉的${} 写法 来代替 *{} 的写法,看看会不会生效

          回到该需求中来, 下一行的代码本质是判断, 因为新增和修改, 都需要走这个页面, 也就是说这个页面要同时承担新增和修改的功能
          如何确定该页面 到底需要干新增的事情?还是修改的事情?
          就需要下面一行的代码的判断了.

          为什么判断条件是-9999?因为一个恶心的问题. 与知识点无关,单纯debug
          给一个不可能的值,一旦接收到id是这个值,那就就说明应该走新增页面.
          其他值是走修改页面
      -->
      <form action="#" method="post" th:action="${type.id}==-9999 ? @{/admin/types} : @{/admin/types/{id}(id=${type.id})} " class="ui form">
        <input type="hidden" name="id" th:value="${type.id}">
        <div class=" field">
          <div class="ui left labeled input">
            <label class="ui teal basic label">名称</label>
            <input type="text" name="name" placeholder="分类名称" th:value="${type.name}">
          </div>
        </div>
        <div class="ui error message"></div>
        <!--
          下一行的#strings.isEmpty看不懂?
          查thymeleaf官方文档!
          Check whether a String is empty (or null). Performs a trim() operation before check
          Also works with arrays, lists or sets

          还有 |(vertical bars 竖棒) 符号 看不懂?
          查thymeleaf官方文档!
          Literal substitutions allow for an easy formatting of strings containing values from variables without the need to append literals with '...' + '...'.

          These substitutions must be surrounded by vertical bars (|), like:
          <span th:text="|Welcome to our application, ${user.name}!|">

          Which is equivalent to:
          <span th:text="'Welcome to our application, ' + ${user.name} + '!'">
          竖棒的意思简而言之就是帮我们简写

          下一行的判断逻辑意思是 如果message不为空,那么text就显示message得值,仅此而已

        -->
        <div class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="|提示： ${message}|">提示：不能添加重复的分类</div>
        <div class="ui right aligned container">
          <button type="button" class="ui button" onclick="window.history.go(-1)" >返回</button>
          <button class="ui teal submit button">提交</button>
        </div>
      </form>
    </div>
  </div>

  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <!--底部栏-->



  <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>


  <script>

      // $('#newblog-container').load(/*[[@{/footer/newblog}]]*/"/footer/newblog");

      $('#blog-message').load(/*[[@{/footer/blogmessage}]]*/"/footer/blogmessage");
      // 运行时间统计
      function secondToDate(second) {
          if (!second) {
              return 0;
          }
          var time = new Array(0, 0, 0, 0, 0);
          if (second >= 365 * 24 * 3600) {
              time[0] = parseInt(second / (365 * 24 * 3600));
              second %= 365 * 24 * 3600;
          }
          if (second >= 24 * 3600) {
              time[1] = parseInt(second / (24 * 3600));
              second %= 24 * 3600;
          }
          if (second >= 3600) {
              time[2] = parseInt(second / 3600);
              second %= 3600;
          }
          if (second >= 60) {
              time[3] = parseInt(second / 60);
              second %= 60;
          }
          if (second > 0) {
              time[4] = second;
          }
          return time;
      }
      function setTime() {
          /*此处为网站的创建时间*/
          var create_time = Math.round(new Date(Date.UTC(2020, 01, 25, 15, 15, 15)).getTime() / 1000);
          var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
          currentTime = secondToDate((timestamp - create_time));
          currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
              + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
              + '秒';
          document.getElementById("htmer_time").innerHTML = currentTimeHtml;
      }
      setInterval(setTime, 1000);

    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

    $('.ui.form').form({
      fields : {
        title : {
          identifier: 'name',
          rules: [{
            type : 'empty',
            prompt: '请输入分类名称'
          }]
        }
      }
    });

  </script>
</body>
</html>